<template>
  <div class="container">
    <div class='parkInfo'>
      <div class="text item" style='margin: 8px'>
        <div class='parklogo'>
          <li><img  width='18px' src='../../assets/map_images/markersidle.png'>  封闭停车场</li>
          <li><img  width='18px' src='../../assets/map_images/markersoffduty.png'> 道路停车场 </li>
          <li><img  width='18px' src='../../assets/map_images/markersfull.png'> 诱导屏 </li>
        </div>
        <div class='roadlogo'>
          <li><img  width='18px' src='../../assets/map_images/AAAA.png'> AAAA路 </li>
          <li><img  width='18px' src='../../assets/map_images/BBBB.png'> BBBB路 </li>
          <li><img  width='18px' src='../../assets/map_images/CCCC.png'> CCCC路 </li>
          <li><img  width='18px' src='../../assets/map_images/DDDD.png'> DDDD路 </li>
        </div>
      </div>
    </div>
    <div class='parkSearch'>
      <el-form :inline="true">
        <el-form-item >
            <el-button  class="btnSearch1" type="primary"   @click="AreaSelect()">{{SelectTips}}</el-button>
          <el-button class="btnSearch1" type="primary"  @click="RestAreaSelect">重置选区分析</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--</div>-->
    <div class='mapContent'>
      <baidu-map  id='parkMap' :center='mapcenter' :zoom="14" :scrollWheelZoom="true" @click=mapClick >
        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
        <!--道路停车-->
        <bm-marker v-for='item in RoadParkList'  :position="{lng:item.parkLong, lat: item.parkLati}"  :animation='item.animation ? item.animation:"null"'
                   :icon="{url: '../src/assets/map_images/markersoffduty.png', size: {'width':30,'height':50}}"
                   @click="openInfo(item)">
          <bm-label :content='item.parkName' :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -18, height: 30}"/>
        </bm-marker>
        <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show" :autoPan="autoPan" :closeOnClick="closeOnClick"
                        @close="infoWindowClose" @open="infoWindowOpen">
          <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">停车场编号：{{this.infoWindow.parkNo}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场类型：{{this.infoWindow.type==1?"道路停车场":"公共停车场"}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
            停车位信息：{{this.infoWindow.totalNum}}个泊位，{{this.infoWindow.surplus}}个可用</p>
        </bm-info-window>
        <!--封闭停车-->
        <bm-marker v-for='item in CloseParkList'  :position="{lng:item.parkLong, lat: item.parkLati}"  :animation='item.animation ? item.animation:"null"'
                   :icon="{url: '../src/assets/map_images/markersidle.png', size: {'width':30,'height':50}}"
                   @click="openInfo(item)">
          <bm-label :content='item.parkName' :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -18, height: 30}"/>
        </bm-marker>
        <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show" :autoPan="autoPan" :closeOnClick="closeOnClick"
                        @close="infoWindowClose" @open="infoWindowOpen">
          <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">停车场编号：{{this.infoWindow.parkNo}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场类型：{{this.infoWindow.type==1?"道路停车场":"公共停车场"}}</p>
          <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
            停车位信息：{{this.infoWindow.totalNum}}个泊位，{{this.infoWindow.surplus}}个可用</p>
        </bm-info-window>
        <!--诱导点-->
        <bm-marker v-for='item in InductionList'  :position="{lng:item.parkLong, lat: item.parkLati}" :animation='item.animation ? item.animation:"null"'
                   :icon="{url: '../src/assets/map_images/markersfull.png', size: {'width':30,'height':50}}"
        >
          <bm-label :content='item.inductionName' :labelStyle="labelStyle" :offset="{width: -18, height: 30}"/>
        </bm-marker>
        <!--道路折线-->
        <bm-polyline  v-for='item in roadlineData' :path="item.point" :stroke-color="item.color" :stroke-opacity="0.5" :stroke-weight="5" :editing="false" ></bm-polyline>
        <!--覆盖物点-->
        <bm-marker v-for='item in clickPoint'  :position="item" >
        </bm-marker>
        <!--多边形覆盖物-->
        <bm-polygon :path="clickPoint" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolygonPath"/>
      </baidu-map>
    </div>
  </div>
</template>

<script>
  import { RoadParkInfo, CloseParkInfo, Inductioninfo } from '../../api/parkingResources/parkingMapInfo';
  export default {
    name: 'areaAnalysis',
    watch:{
    },
    data() {
      return {
        openDiySelect: false,
        SelectTips: '开启选区分析',
        mapcenter: { // 中心点
          lng: 117.536943,
          lat: 36.702987
        },
        // 折现用的点
        roadlineData: [
          {
            color: 'red',
            point: [
              { lng: 117.520502, lat: 36.692105 },
              { lng: 117.524455, lat: 36.692191 },
              { lng: 117.52891, lat: 36.693436 }
            ]
          },
          {
            color: 'blue',
            point:[
              { lng: 117.536492, lat: 36.698529 },
              { lng: 117.536815, lat: 36.701191 },
              { lng: 117.536168, lat: 36.695982 },
              { lng: 117.536204, lat: 36.693465 }
            ]
          }
        ],
        //  点选坐标点  多边形覆盖点
        clickPoint: [],
        anmiteIndex: '', // 动画点索引
        // 信息窗显示
        show: false,
        // 封闭车场列表
        CloseParkList: '',
        // 道路车场列表
        RoadParkList: '',
        // 诱导列表
        InductionList: '',
        parkName: '', // 搜索用 车场名称
        searchResult: '',
        isserch: false,
        noneserch: false,
        nonetips: '',
        markerArry: [], // 标注点
        remoAntMarker: '',
        // 标签 样式
        labelStyle: {
          color: 'red',
          fontSize: '12px'
        },
        // 信息窗
        infoWindow: {
          longirude: 0,
          latitude: 0,
          title: '',
          parkNo: '',
          dw: '',
          chargeType: '',
          totalNum: '',
          surplus: '',
          type: ''
        },
        autoPan: true,
        closeOnClick: false
      }
    },
    watch: {
      RoadParkList(Val) {
        this.RoadParkList = Val
      },
      CloseParkList(Val) {
        this.parkingResources = Val
      }
    },
    mounted() {
      // 数据获取
      this.requestAllData()
    },
    methods: {
      // 数据请求
      requestAllData() {
        // 道路停车场信息
        RoadParkInfo().then((data) => {
          this.RoadParkList = data
        })
        // 诱导车场信息
        Inductioninfo().then((data) => {
          this.InductionList = data
        })
        // 封闭停车场
        CloseParkInfo().then((data) => {
          this.CloseParkList = data
        })
      },
      // 打开信息窗体
      openInfo(val) {
        this.infoWindow.title = val.parkName
        this.infoWindow.longirude = val.parkLong
        this.infoWindow.latitude = val.parkLati
        this.infoWindow.parkNo = val.parkNo
        this.infoWindow.dw = val.parkOrg
        this.infoWindow.totalNum = val.total
        this.infoWindow.type = val.type
        this.infoWindow.surplus = val.remain
        this.show = true
      },
      // 信息窗显示与否
      infoWindowClose(e) {
        this.show = false;
        // 恢复初始
        // 去掉 动画  回到地图中心
        var backcenter = { // 中心点
          lng: 117.536943,
          lat: 36.702987
        };
        this.mapcenter = backcenter // 地图位置移动到中央
        // 去掉动画
        this.RoadParkList[this.anmiteIndex].animation = 'null';
      },
      infoWindowOpen(e) {
        this.show = true
      },
      // ---多边形变化更新视图
      updatePolygonPath(e) {
        this.polygonPath = e.target.getPath()
      },
      // 点击  坐标点
      mapClick(e) {
        if (!this.openDiySelect) {
          return
        }
        this.clickPoint.push(e.point)
      },
      AreaSelect() {
        if(!this.openDiySelect){
          this.SelectTips = '关闭选区分析'
          this.openDiySelect = true
        }else {
          this.openDiySelect = false
          this.SelectTips = '开启选区分析'
          this.clickPoint = []
        }

      },
      RestAreaSelect() {
        this.clickPoint = []
      }
    }
  };
</script>
<style scoped>
  .container{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .mapContent{
    position: relative;
    padding: 20px;
    width: 100%;
    height: 90vh;
  }
  #parkMap {
    width: 100%;
    height: 100%;
  }
  .parkOption{
    height: 50px;
    width: 95%;
    display: flex;
    flex-direction: row ;
    justify-content: space-between;
    align-items:center;
    align-content: center;
    margin-left: 20px;
    position: absolute;
    top: 40px;
    z-index: 100;
  }
  .parkSearch{
    height: 50px;
    min-width: 280px;
    margin-top:10px ;
    position: fixed;
    top:100px;
    right: 8px;
    z-index: 200;
  }
  .parkInfo{
    height: 118px;
    width: 200px;
    position: fixed;
    top:100px;
    z-index: 200;
    background-color: white;
  }
  li {
    list-style-type:none;
    font-size: 13px;
  }
  .parklogo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 2px 0
  }
  .roadlogo{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 2px 0;
  }
  .el-card__body{
    padding: 0px;
  }
  .info-item{
    height: 20px;
    padding: 0 5px;
    margin-top:10px;
    margin-bottom:10px;
  }
  .el-tag ,.el-tag--medium{
    font-size: 15px;
  }
  .el-collapse-item__header{
    text-align: center !important;
    margin: auto;
  }
</style>
